<template>
	  <div class="goods-list">
		    <div class="goods-item" v-for="item in goodslist" :key="item.id">
			      <a href="#">
				       <router-link :to="{name: 'goods_info', params: {id: item.id}}">
					  <img :src="item.image">
					  <h1 class="title">{{ item.name }}</h1>
					  <p class="info">
						    <span class="price">¥{{ item.price }}</span>
						     <span class="sell">剩余 {{ item.num }} 件</span>
						  </p>
				</router-link>
				      </a>
			    </div>
		 <mt-button class="more" v-if="goodslist.length !== 0" size="large" @click="getMore">加载更多</mt-button>
		  </div>
</template>
<script>
	export default {
		props: ['category_id'],
		data() {
			return {
				goodslist: [],
				last_id: 0
			}
		},
		created() {
			this.getGoodsList()
		},
		methods: {
			getGoodsList() {
				this.$indicator.open({
					text: '加载中'
				})
				let params = {
					last_id: this.last_id,
					category_id: this.category_id
				}
				this.$http.get('goodslist', {
					params: params
				}).then(res => {
					this.$indicator.close()
					if (res.data.code === 1) {
						if (res.data.data.length > 0) {
							this.goodslist = this.goodslist.concat(res.data.data)
							this.last_id = res.data.data[res.data.data.length - 1].id
						} else if (this.goodslist.length > 0) {
							this.$toast('已经到达底部')
						} else {
							this.$toast('列表为空')
						}
					}
					window.console.log(res.data)
				})
			},
			getMore() {
				this.getGoodsList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.more {
		margin: 15px 0;
		font-size: 14px;
	}

	.goods-list {
		display: flex;
		flex-wrap: wrap;
		padding-left: 10px;

		.goods-item {
			width: calc(calc(100% / 2) - 10px);
			margin: 10px 10px 0 0;
			background: #fff;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			border-radius: 10px;
			padding: 10px;

			img {
				width: 100%;
			}

			.title {
				font-size: 14px;
				color: #333;
				margin: 10px 0;
			}

			.info {
				display: flex;
				justify-content: space-between;
				margin-bottom: 0;

				.price {
					color: red;
					font-weight: bold;
					font-size: 16px;
				}

				.sell {
					font-size: 13px;
				}
			}
		}
	}
</style>
